import React, { useState, useEffect } from 'react'
import { getBooksListApi } from '@/api/booksList'
import type { BooksListInterface } from '#/api'
import './books.scss'
import Layout from '@/component/layout/layout'
import { InboxOutlined, TagsOutlined, SettingOutlined, MoreOutlined } from '@ant-design/icons'
import type { UploadProps } from 'antd'
import { message, Upload, Collapse, Select, Checkbox } from 'antd'
import type { CheckboxChangeEvent } from 'antd/es/checkbox'

const { Dragger } = Upload

const { Panel } = Collapse
const { Option } = Select

const items = [
  {
    key: 'books_admin',
    label: '书签管理',
    icon: React.createElement(TagsOutlined)
  }
]

// const props: UploadProps = {
//   name: 'file',
//   multiple: true,
//   action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
//   onChange(info) {
//     const { status } = info.file
//     if (status !== 'uploading') {
//       console.log(info.file, info.fileList)
//     }
//     if (status === 'done') {
//       message.success(`${info.file.name} file uploaded successfully.`)
//     } else if (status === 'error') {
//       message.error(`${info.file.name} file upload failed.`)
//     }
//   },
//   onDrop(e) {
//     console.log('Dropped files', e.dataTransfer.files)
//   }
// }

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`

function BooksAdmin() {
  const [books, setBooks] = useState<any[]>([])
  const [params, setParams] = useState<BooksListInterface>()

  // 获取所有书签列表
  const getBooksList = async (params?: BooksListInterface) => {
    const { code, data } = await getBooksListApi(params)
    if (code !== 200) return []
    return data
  }

  useEffect(() => {
    getBooksList(params).then((res) => setBooks(res.data))
  }, [params])

  // 点击菜单
  const menuClick = (key: string) => {
    console.log('key', key)
  }

  // const onPositionChange = (newExpandIconPosition: ExpandIconPosition) => {
  //   setExpandIconPosition(newExpandIconPosition)
  // }

  const onChange = (key: string | string[]) => {
    console.log(key)
  }

  const onCheckChange = (e: CheckboxChangeEvent) => {
    console.log(`checked = ${e.target.checked}`)
  }
  
  return (
    <Layout click={menuClick} items={items}>
      <Collapse
        onChange={onChange}
        expandIconPosition="end"
        className="bg-light collapse"
        accordion
      >
        {books &&
          books.map((item) => (
            <Panel
              header={
                <div
                  onClick={(event) => {
                    event.stopPropagation()
                  }}
                >
                  <Checkbox onChange={onCheckChange}>{item.name}</Checkbox>
                </div>
              }
              key={item.id}
              extra={
                <MoreOutlined
                  onClick={(event) => {
                    event.stopPropagation()
                  }}
                />
              }
            >
              <div className="checkbox">
                <Checkbox onChange={onCheckChange}>{item.name}</Checkbox>
              </div>
            </Panel>
          ))}
      </Collapse>
    </Layout>
  )
}

export default BooksAdmin
